<template>
  <codemirror
      ref="codemirrorRef"
      v-model="codeStr"
      :options="options" >
  </codemirror>
</template>
<script>
    import 'codemirror/mode/python/python.js'
    import 'codemirror/mode/clike/clike.js'
    // 折叠功能需引入的文件start
    import 'codemirror/addon/fold/foldgutter.css'
    import 'codemirror/addon/fold/foldcode'
    import 'codemirror/addon/fold/foldgutter'
    import 'codemirror/addon/fold/brace-fold'
    import 'codemirror/addon/fold/comment-fold'
    // 折叠功能需引入的文件end

    // 主题css
    import 'codemirror/theme/material.css'
    // require active-line.js
    import 'codemirror/addon/selection/active-line.js'
    // 支持括号自动匹配
    import 'codemirror/addon/edit/closebrackets.js'

    /*
    语言类型：
    java: text/x-java
    R: text/x-rsrc
    python: text/x-python
     */
    export default {
        props: {
            data: Object,//父传子数据
        },
        data () {
            return {
                dialogVisible: false,
                codeStr: '',//将data序列化生成最终数据
                options: { //配置项
                    tabSize: 2,
                    lineNumbers: true, // 显示行号
                    mode: "text/x-java",
                    extraKeys: {"ctrl": "autocomplete"},   //自动提示配置
                    theme: 'material', // 主题根据需要自行配置
                    // 代码折叠功能配置项start
                    foldGutter: true,
                    lineWrapping: true,
                    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
                    // 代码折叠功能配置项end
                }
            }
        },
        // 监听屏幕
        mounted() {
            let that = this;
            that.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
            // // 获取codemirror对象
            that.editor = this.$refs.codemirrorRef.codemirror;
            // // 设置codemirror高度
            that.editor.setSize('auto',this.clientHeight - 105);

            // 监听屏幕
            window.onresize = function () {
                that.clientHeight = `${document.documentElement.clientHeight}`;
                // 设置代码区域高度
                that.editor.setSize('auto',parseFloat(that.clientHeight) - 105);
            }
        },
        methods: {
            //初始化数据
            init () {
                this.flowJsonData = JSON.stringify(this.data, null, 4).toString()//初始化核心代码
            },

        }
    }
</script>
